<template>
	<view class="page">
		<view class="flex-col group_3">
			<view class="flex-col section_1">
				<view class="justify-between group_4">
					<text class="text_2">客服热线</text>
					<view class="flex-col items-end group_5" @click="call">
						<text class="text_3">{{info.kefu_mobile}}</text>
						<text class="text_4">{{info.kefu_time}}</text>
					</view>
				</view>
				<view class="justify-between group_6">
		 		    <text class="text_5">客服QQ</text>
					<text class="text_6">{{info.kefu_qq}}</text>
				</view>
			</view>
			<view class="flex-col section_2">
				<text class="text_7">客服微信</text>
				<view class="flex-col items-center group_7 align-center">
					<image
						:src="info.kefu_weixin"
						class="image_3"
						mode="widthFix"
						@click="previewImg"
						:show-menu-by-longpress="true"
					/>
					<text class="text_8">点击放大保存二维码，添加微信</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const kefu = defineComponent({
	components:{
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
	       info:{},
		})
		// watchEffect(()=>{
		// })
		onLoad(async()=>{
			const res = await uni.$request('basedata.index')
			data.info = res.data;
		})
		//放大图片
		const previewImg = ()=>{
			const urls = [data.info.kefu_weixin]
		    uni.$tools.previewImg(urls,0);
		}
		const call = ()=>{
			if(!data.info.kefu_mobile){
				return;
			}
			var phoneNumber = data.info.kefu_mobile+''
			uni.makePhoneCall({
				phoneNumber:phoneNumber
			})
		}
		return {
			...toRefs(data),
			previewImg,
			call,
		};
	}
})
export default kefu;
</script>

<style lang="scss">
.group_3 {
	padding: 28rpx 29rpx 30rpx;
	flex: 1 1 auto;
	overflow-y: auto;
}
.section_1 {
	padding-bottom: 50rpx;
	background-color: #ffffff;
	box-shadow: 0px 0px 27rpx #2a2a2a1a;
	border-radius: 10rpx;
}
.section_2 {
	margin-top: 24rpx;
	padding: 50rpx 31rpx;
	background-color: #ffffff;
	box-shadow: 0px 0px 27rpx #2a2a2a1a;
	border-radius: 10rpx;
}
.group_4 {
	padding: 35rpx 31rpx;
	border-bottom: solid 1rpx #0000000f;
}
.group_6 {
	padding: 51rpx 20rpx 0 31rpx;
}
.text_7 {
	align-self: flex-start;
	color: #333333;
	font-size: 30rpx;
	font-family: PingFang;
	line-height: 28rpx;
	letter-spacing: 1.2rpx;
}
.group_7 {
	margin-top: 58rpx;
}
.text_2 {
	align-self: center;
	color: #333333;
	font-size: 30rpx;
	font-family: PingFang;
	line-height: 28rpx;
	letter-spacing: 1.2rpx;
}
.group_5 {
	margin-right: 4rpx;
}
.text_5 {
	color: #333333;
	font-size: 30rpx;
	font-family: PingFang;
	line-height: 28rpx;
	letter-spacing: 1.2rpx;
}
.text_6 {
	margin-top: 4rpx;
	color: #333;
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: bold;
}
.image_3 {
	width: 350rpx;
	height: 350rpx;
}
.text_8 {
	margin-top: 19rpx;
	color: #999999;
	font-size: 24rpx;
	font-family: PingFang;
	line-height: 24rpx;
}
.text_3 {
	color: $base-color;
	font-size: 30rpx;
	font-family: PingFang;
	font-weight: bold;
	letter-spacing: 1.2rpx;
}
.text_4 {
	margin-right: 4rpx;
	margin-top: 13rpx;
	color: #999999;
	font-size: 24rpx;
	font-family: PingFang;
	line-height: 22rpx;
}
</style>
